<template>
	<view class="editUserName">
		<view class="inputs">
			<input type="text" placeholder="请输入用户名" v-model="userName" />
			<image src="../../static/images/del_icon.png" mode="widthFix" @tap="clearName"></image>
		</view>
		<view class="desction">
			1-10个字符，可由中英文、数字组成
		</view>
		<view class="submit" @tap="submit">
			<view>
				完成
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				userName:""
			}
		},
		onLoad(e) {
			this.userName = e.name 
		},
		methods:{
			submit(){
				if(!/^[\u4e00-\u9fa5a-zA-Z0-9]{1,10}$/.test(this.userName)){
					uni.showToast({
						title:"名称由1-10个字符，可由中英文、数字组成",
						icon:"none"
					})
				}else{
					uni.setStorage({
							key:"nickName",
							data:this.userName
						})
					uni.navigateBack()
				}
			},
			clearName(){
				this.userName = ""
			}
		}
	}
</script>


<style lang="scss">
	.editUserName{
		height: 100vh;
		background-color: #f2f2f2;
		position: relative;
		.inputs{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			width: 100%;
			height: 100upx;
			font-size: 32upx;
			padding: 0 28upx;
			box-sizing: border-box;
			input{
				width: 80%;
			}
			image{
				width: 24upx;
				height: 24upx;
				
			}
		}
		.desction{
			font-size: 24upx;
			color: #999;
			padding-left: 28upx;
			box-sizing: border-box;
		}
		.submit{
			width: 100%;
			height: 88upx;
			text-align: center;
			position: absolute;
			bottom: 150upx;
			view{
				display: inline-block;
				width: 670upx;
				height: 88upx;
				background:linear-gradient(0deg,rgba(232,39,27,1),rgba(250,94,52,1));
				border-radius: 44upx;
				font-size: 36upx;
				line-height: 88upx;
				font-weight: bold;
				color: #fff;
			}
		}
	}
</style>
